<template>
<div class="ivu-card ivu-card-bordered ivu-card-dis-hover">
  <div class="ivu-card-head">
    <p>{{ $route.meta.title }}</p>
  </div>

  <div class="ivu-card-head" v-if="!list.loading">
    <h2>进货订单信息:</h2><br /><br />
    <h4>可匹配数量: {{ tradeSell.amount }}</h4><br />
    <h4>创建日期: {{ new Date(parseInt(tradeSell.create_time) * 1000).toLocaleString() }}</h4>
  </div>

  <div class="ivu-card-body">
    <Table @on-selection-change="onSelectionChange" :columns="list.columns" :data="list.items" :loading="list.loading"
    />
  </div>

  <div class="ivu-card-body"><Page :current="pager.current" :total="pager.totalItems" :page-size="pager.limit" show-total @on-change="onChangePage"></Page></div>

  <div class="ivu-card-head" style="text-align: right;">
    <Button type="primary" :loading="submitLoading" @click="onSubmitMatch">确认匹配</Button>
    <Button type="ghost" @click="$router.go(-1);">返回</Button>
  </div>
</div>
</template>

<script>
import qs from 'qs';
import { Button, Table, Page, Message } from 'iview';
import ajaxiView from '@/utils/ajaxiView';
import auth from '@/utils/auth';

export default {
  components: {
    [Button.name]: Button,
    [Table.name]: Table,
    [Page.name]: Page
  },
  data() {
    return {
      apiConfig: {},
      token: auth.getToken(),
      submitLoading: false,
      selectTrade: [],
      tradeSell: {},
      list: {
        columns: [
          {type: 'selection', width: 60, align: 'center'},
          {title: 'ID', key: 'trade_buy_id', align: 'center'},
          {title: '订单号', key: 'create_time', align: 'center'},
          {title: '用户名', key: 'account', align: 'center'},
          {title: '创建时间', key: 'create_time', align: 'center', render: (h, params) => { return h('span', new Date(parseInt(params.row.create_time) * 1000).toLocaleString()); }},
          {title: '数量', key: 'amount', align: 'center'}
        ],
        loading: false,
        items: []
      },
      pager: {
        current: 1,
        limit: 10,
        totalItems: 0
      }
    };
  },
  methods: {
    _initialize() {
      this.getData();
    },
    getData() {
      let _this = this;
      _this.list.loading = false;
      ajaxiView.get('/backstage/trade/business/sell/'+this.$route.params.id+'/match?token='+_this.token+'&page='+_this.pager.current).then(function(data) {
        if(data !== false && typeof(data.pager) != 'undefined') {
          _this.tradeSell = data.trade_sell;
          _this.list.items = data.pager.items;
          _this.pager.limit = data.pager.limit;
          _this.pager.totalItems = data.pager.total_items;

          _this.list.loading = false;
        }
      });
    },
    onChangePage(current) {
      this.pager.current = current;
      this.getData();
    },
    onSelectionChange(sel) {
      let amount = 0;
      this.selectTrade = [];
      for(let i in sel) {
        amount += sel[i].amount*1;
        this.selectTrade.push(sel[i].trade_buy_id);
      }
      if(amount > this.tradeSell.amount) {
        Message.warning('你选择的数量大于可匹配数量');
      }
    },
    onSubmitMatch() {
      if(this.selectTrade.length <= 0) {
        Message.error('请选择匹配的订单');
        return false;
      }

      var _this = this;
      ajaxiView.post('/backstage/trade/business/sell/'+this.$route.params.id+'/match?token='+this.token, qs.stringify({'trade_buy_ids':this.selectTrade})).then(function(data) {
        if(data !== false) {
          Message.success({
            content: data.msg,
            onClose: function() {
              _this.$router.push({ name: 'tradeBusinessSellIndex' });
            }
          });
        }
      });
    }
  },
  mounted() {
    this._initialize();
  }
}
</script>